<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>分类管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../static/layuiadmin/layui/css/layui.css" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" href="../../../static/layuiadmin/style/admin.css" th:href="@{/layuiadmin/style/admin.css}" media="all">
    <style>
        .layui-form-label{
            text-align: left!important;
            width: auto;!important;
        }
        .layui-input-block {
            margin-left: 58px!important;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="demoTable">
            类型名：
            <div class="layui-inline">
                <input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="类型名">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="layui-btn" data-type="add"><i class="layui-icon">&#xe608;</i> 添加一个类型</button>
        </div>
        <table class="layui-hide" id="test" lay-filter="test"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>
</div>
</body>
<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="templateForm" style="padding: 20px 0 0 0;display: none;">
    <form class="layui-form" action="" style="margin-top: 10px;margin-right: 0;margin-left: 5px;" lay-filter="formValue" id="formValue">
        <div class="layui-form-item">
            <label class="layui-form-label">类型名</label>
            <div class="layui-input-inline">
                <input type="text" name="typeName" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" id="typeName">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="../../../static/layuiadmin/layui/layui.js" th:src="@{/layuiadmin/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'useradmin', 'table'], function() {
        var $ = layui.$;
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'type/getTypes'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print']
            ,title: '类型数据表'
            ,cellMinWidth: 100
            ,cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID', unresize: true, sort: true, align: 'center'}
                    ,{field:'typeName', title:'类型名', unresize: true, align: 'center'}
                    ,{title:'操作', toolbar: '#barDemo',width:180}
                ]
            ]
            ,page: true
            ,limits:[20,30,50,100]
            ,limit:15
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除 '+data.typeName+' 类型么', function(index){
                    obj.del();
                    $.ajax({
                        url: "type/deleteType/"+data.typeName,
                        method: 'POST',
                        cache: false,
                        success: function (status) {
                            if(status === 'SUCCESS'){
                                //console.log(data)
                                layer.close(index);
                                table.reload('test',{//重载表格
                                    page:{
                                        curr:1
                                    }
                                })
                            }else {
                                layer.alert("删除失败")
                            }
                        }
                    });
                });
            } else if(obj.event === 'edit'){

                var index = layer.open({
                    type: 1 //Page层类型
                    ,skin: 'layui-layer-molv'
                    ,title: ['编辑类型信息','font-size:18px;text-align:center;font-weight:bolder;']
                    ,shadeClose: true
                    ,maxmin: true //允许全屏最小化
                    ,area: ['340px', '300px']
                    ,btn:["提交","取消"]
                    ,fix: false
                    ,shade: 0.4//遮罩透明度
                    ,content: $('#templateForm')
                    ,success:function(index, layero){
                        $('#typeName').val(data.typeName);
                    }
                    ,yes:function (index, layero) {
                        //var formData = {};
                        var data1 = $('#formValue').serializeArray();
                        //$.each(t, function() {
                        //formData[this.name] = this.value;
                        //});
                        //console.log(JSON.stringify(formData));
                        //var data1 = JSON.stringify(formData);
                        //var data1 = form.val("#formValue");
                        //console.log(data1);
                        //异步提交
                        $.ajax({
                            url: "type/updateType/"+data.id+"/"+data.typeName,
                            method: 'POST',
                            data: data1,
                            cache: false,
                            success: function (status) {
                                if(status === 'SUCCESS'){
                                    //console.log(data)
                                    layer.alert("ID为 "+data.id+" 的类型修改成功，修改后数据为{类型名："+data1[0].value+"}");
                                    layer.close(index);//关闭弹出层
                                    $("#formValue")[0].reset();//重置form
                                    table.reload('test',{//重载表格
                                        page:{
                                            curr:1
                                        }
                                    })
                                }else if (status === 'exist') {
                                    layer.alert("该类型已存在")
                                }else {
                                    layer.alert("修改失败")
                                }
                            }
                        });
                    }
                    ,btn2: function(index, layero){
                        layer.close(index);//关闭弹出层
                        $("#formValue")[0].reset()//重置form
                    }
                });
            }else if (obj.event === 'detail'){
                layer.alert("数据为{类型名："+data.typeName+"}");
            }
        });
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        searchContent: demoReload.val()
                    }
                }, 'data');
            },
            add:function () {
                $("#formValue")[0].reset();//重置form
                var index = layer.open({
                    type: 1 //Page层类型
                    ,skin: 'layui-layer-molv'
                    ,title: ['添加一个用户','font-size:18px;text-align:center;font-weight:bolder;']
                    ,shadeClose: true
                    ,maxmin: false //允许全屏最小化
                    ,area: ['340px', '300px']
                    ,btn:["提交","取消"]
                    ,fix: false
                    ,shade: 0.4//遮罩透明度
                    ,content: $('#templateForm')
                    ,yes:function (index, layero) {
                        var data = $("#formValue").serializeArray();
                        //var data1 = form.val("formValue");
                        //异步提交
                        $.ajax({
                            url: "type/addType",
                            method: 'POST',
                            data: data,
                            cache: false,
                            success: function (status) {
                                if(status === 'SUCCESS'){
                                    layer.alert("类型名为 "+data[0].value+" 的类型添加成功，添加的数据为{类型名："+data[0].value+"}");
                                    layer.close(index);//关闭弹出层
                                    $("#formValue")[0].reset();
                                    //重置form
                                    table.reload('test',{//重载表格
                                        page:{
                                            curr:1
                                        }
                                    })
                                }else if (status === 'exist') {
                                    layer.alert("该类型已存在")
                                }else {
                                    layer.alert("添加失败")
                                }
                            }
                        });
                    }
                    ,btn2: function(index, layero){
                        layer.close(index);//关闭弹出层
                        $("#formValue")[0].reset();//重置form
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
</html>
